<link rel="stylesheet" type="text/css" href="__CSS__/HMW.css" />
<link rel="stylesheet" type="text/css" href="__CSS__/bootcssButtons.css" />
{include file="index/question_bank/canvas_structure_ques" /}


<div style="margin-top:100px;width: 100%;text-align: center;font-size: 30px;">
    <div style="width: 130px;position: relative;margin-left: 45%;">
        HMW

        <div class="tooltip" style="width: 24px;height: 24px;position: absolute;top: 0%;left: 100%;">

            <img style="width: 24px;height: 24px;position: absolute;top: 0%;left: 0%;" src="__IMG__/explaination.png">

            <span class="tooltiptext" style="text-align:left;font-size: 14px;">
                以How might we（我们应该如何）的句式开头，寻找解决问题的方向，不断扩展需要解决的问题，寻找创新机会点。
            </span>
        </div>

    </div>
</div>



<!--WHO;需要(Gain);因为(Pain)-->
<div style="font-size: 18px;margin:10px 0 0 240px;">
    <text class="title">
        <b>WHO:<text style="color: red;">*</text></b>
    </text>

    <div class="tooltip" style="width: 844px;float: none;">
        <input readonly id="newTargetUser" class="extraInfoInput"
               value="{$targetUser}" maxlength="100" placeholder="(点击此处输入目标用户)"  style="font-size:15px;background:inherit;border: none;border-bottom: 1px solid lightgray;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 100%;"/>

        <!--<div class="tooltiptext" style="">修改需要解决的问题</div>-->
    </div>
</div>

<div style="font-size: 18px;margin:10px 0 0 240px;">
    <text class="title">
        <b>需要(Gain):</b>
    </text>

    <div class="tooltip" style="width: 844px;float: none;">
        <input readonly id="newGain" class="extraInfoInput"
               value="{$gain}" maxlength="100" placeholder="(点击此处输入Gain)"  style="font-size:15px;background:inherit;border: none;border-bottom: 1px solid lightgray;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 100%;"/>

        <!--<div class="tooltiptext" style="">修改需要解决的问题</div>-->
    </div>
</div>

<div style="font-size: 18px;margin:10px 0 0 240px;">
    <text class="title">
        <b>因为(Pain):</b>
    </text>

    <div class="tooltip" style="width: 844px;float: none;">
        <input readonly id="newPain" class="extraInfoInput"
               value="{$pain}" maxlength="100" placeholder="(点击此处输入Pain)"  style="font-size:15px;background:inherit;border: none;border-bottom: 1px solid lightgray;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 100%;"/>

        <!--<div class="tooltiptext" style="">修改需要解决的问题</div>-->
    </div>
</div>



<!--具体条目分块-->
<!--1.HMW-->
<div class="table_row_main" style="display:table;min-height:200px;margin-left: 220px;margin-top: 10px;clear: both;">

    {volist name="types" id="t" offset="0" length="1"}

    <div class="typeBlock" id="typeBlock_{$t.id}"  >
        <div class="title">
            <text>{$t.type_name}</text>
        </div>


        <div class="msg"  id="msg_{$t.id}">
            {volist name="pre_records" id="r"}

            {if condition="$r.type_name == $t.type_name "}



            <div style="position: relative;float: left;margin:10px 0 10px 30px;">
                <div style="border:1px solid lightgray;">
                    <div style="padding: 3px 0;margin: 0px 5px;">我们应该如何</div>
                </div>

                {if condition="$r.readonly == 'N'"}
                <textarea  maxlength="50" id="record_{$r.id}"  style="border:none;" oninput="onkeyupForTextarea('{$r.id}')" class="record_area">{$r.contents}</textarea>

                {else/}
                <textarea  disabled id="record_{$r.id}"  style="border:none;cursor:not-allowed;background-image: linear-gradient(#eaeaea 6%, #cbcbcb 95%);/*background-color: rgb(235,235,228);*/"  class="record_area">{$r.contents}</textarea>
                {/if}

                <div id="text_count_{$r.id}" class="text_count" style="">
                    {:iconv_strlen($r.contents)}/50
                </div>

            </div>

            {/if}
            {/volist}
        </div>
    </div>

    {/volist}
</div>




<script>



    //画布的  信息上边栏  随滚动条移动自动到达屏幕顶端
    var _box_y = $("#work_top_window").offset().top;
    $(window).scroll(function(){
        if($(window).scrollTop() > _box_y){
            $("#work_top_window").css("top",$(window).scrollTop()+"px");
            $("#work_top_window").css("z-index",101);
        }else{
            $("#work_top_window").css("top",_box_y);
        }
    });




    setTimeout(function () {
        var allText = $(".record_area");

        //console.log(allText);
        for (var i = 0; i < allText.length; i++) {
            autoTextarea(allText[i]);// 调用
        }
    }, 0);



    var crtRecordId = 0;

    // 防抖
    var debounce = (function () {
        var timeout = null;
        return function() {
            if(timeout !== null){
                clearTimeout(timeout);
            }
            timeout = setTimeout(function () {
                editRecord(window.crtRecordId);
            }, 1000);
        }
    })();

    //调用后台编辑函数；更改字数统计div；广播新内容
    function onkeyupForTextarea(recordId){
        var id = "record_" + recordId;

        this.crtRecordId = recordId;
        //不需要显示edit按钮了
        //$('#'+id).next().children('.edit_btn').show();


        // 触发防抖函数(editRecord)
        debounce();


        var newContent = $('#'+id).val().length + "/100";
        $('#text_count_' + recordId).html(newContent );


    }

    function editRecord( record_id){
        var value = $('#record_'+ record_id).val();

        $('#auto_save').text('自动保存中...');

        //insert into database

        $.ajax({
            type:"POST",
            url:"__PUBLIC__/index/index/editQuesRecord",
            data: {
                preId: record_id,
                newRecord: value,
                userId:"{$_COOKIE['user']}"
            },
            success:function (result) {
                setTimeout(function () {
                    $('#auto_save').text('√自动保存成功');
                }, 1000);



            }
        })
    }


    /**
     * 文本框根据输入内容自适应高度
     * @param                {HTMLElement}        输入框元素
     * @param                {Number}                设置光标与输入框保持的距离(默认0)
     * @param                {Number}                设置最大高度(可选)
     */
    var autoTextarea = function (elem, extra, maxHeight) {
        extra = extra || 0;
        var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,
            isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),
            addEvent = function (type, callback) {
                elem.addEventListener ?
                    elem.addEventListener(type, callback, false) :
                    elem.attachEvent('on' + type, callback);
            },
            getStyle = elem.currentStyle ? function (name) {
                var val = elem.currentStyle[name];

                if (name === 'height' && val.search(/px/i) !== 1) {
                    var rect = elem.getBoundingClientRect();
                    return rect.bottom - rect.top -
                        parseFloat(getStyle('paddingTop')) -
                        parseFloat(getStyle('paddingBottom')) + 'px';
                };

                return val;
            } : function (name) {
                return getComputedStyle(elem, null)[name];
            },
            minHeight = parseFloat(getStyle('height'));

        elem.style.resize = 'none';

        var change = function () {
            var scrollTop, height,
                padding = 0,
                style = elem.style;

            if (elem._length === elem.value.length) return;
            elem._length = elem.value.length;

            if (!isFirefox && !isOpera) {
                padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));
            };
            //scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

            elem.style.height = minHeight + 'px';
            if (elem.scrollHeight > minHeight) {
                if (maxHeight && elem.scrollHeight > maxHeight) {
                    height = maxHeight - padding;
                    style.overflowY = 'auto';
                } else {
                    height = elem.scrollHeight - padding;
                    style.overflowY = 'hidden';
                };
                style.height = height + extra + 'px';
                //scrollTop += parseInt(style.height) - elem.currHeight;
                //document.body.scrollTop = scrollTop;
                //document.documentElement.scrollTop = scrollTop;
                elem.currHeight = parseInt(style.height);
            };
        };

        addEvent('propertychange', change);
        addEvent('input', change);
        addEvent('focus', change);
        change();
    };

</script>